<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import dayjs from "dayjs";
import { useRouter } from "vue-router";
import { storeToRefs } from "pinia";
import { useTabsMeun } from "@/store/tabsMeun";
const prop=defineProps({
  data:{
    type:Object
  }
})
console.log(prop.data[0],"+------")
const { tabsMeun } = storeToRefs(useTabsMeun());
let router = useRouter();
const currentDay = ref<any>("");
const currentDate = ref<any>("");
let timer: any = null;
function realTime() {
  timer = setInterval(() => {
    currentDay.value = dayjs().format("YYYY年MM月DD日");
    currentDate.value = dayjs().format("HH:mm:ss");
  }, 1000);
}
realTime();
let navMeun: any = ref([
  { name: "fullscreen", size: 40, id: 1 },
  {
    name: "gitee",
    size: 30,
    id: 2,
    src: "https://gitee.com/hubinghua123/novel-web",
  },
  { name: "exitlogin", size: 25, id: 3 },
]);
function isFullscreen() {
  if (
    document.fullscreenElement ||
    (document as any).msFullscreenElement ||
    (document as any).mozFullScreenElement ||
    (document as any).webkitFullscreenElement
  ) {
    return true;
  } else {
    return false;
  }
}
onBeforeUnmount(() => {
  clearInterval(timer);
  timer = null;
});
onMounted(() => {
  window.addEventListener("fullscreenchange", () => {
    let flag = isFullscreen();
    if (!flag) {
      navMeun.value[0].name = "fullscreen";
      navMeun.value[0].size = 40;
      return;
    }
    navMeun.value[0].name = "exitfullscreen";
    navMeun.value[0].size = 30;
  });
});

function handle(val: any) {
  switch (val.id) {
    case 1:
      const elem = document.documentElement;
      if (isFullscreen()) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if ((document as any).mozCancelFullScreen) {
          (document as any).mozCancelFullScreen();
        } else if ((document as any).webkitExitFullscreen) {
          (document as any).webkitExitFullscreen();
        } else if ((document as any).msExitFullscreen) {
          (document as any).msExitFullscreen();
        }
      } else {
        if (elem.requestFullscreen) {
          elem.requestFullscreen();
        } else if ((elem as any).mozRequestFullScreen) {
          (elem as any).mozRequestFullScreen();
        } else if ((elem as any).webkitRequestFullscreen) {
          (elem as any).webkitRequestFullscreen();
        } else if ((elem as any).msRequestFullscreen) {
          (elem as any).msRequestFullscreen();
        }
      }
      break;
    case 2:
      window.open(val.src);
      break;
    case 3:
      tabsMeun.value = [JSON.parse(JSON.stringify(tabsMeun.value[0]))];
      router.replace("/login");
      break;
    default:
      break;
  }
}
const count = ref(0);
</script>

<template>
  <div class="shell">
    <div class="leftNotice">
      <span class="scrolling-text">~admin,欢迎使用博客后台系统~{{ prop.data[1]?.a }}--{{ prop.data[0]?.a }}</span>
      
    </div>
    <div class="rightControl">
      <div class="date">
        <span>{{ currentDay }}</span>
        <span>{{ currentDate }}</span>
      </div>
      <template v-for="(item, index) in navMeun" :key="index">
        <SvgIcon
          :name="item.name"
          :size="item.size"
          style="margin-right: 25px"
          @click="handle(item)"
        />
      </template>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.shell {
  width: 100%;
  height: 50px;
  background-color: rgb(116, 167, 235);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  .leftNotice {
    width: calc(100% - 200px);
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    .scrolling-text {
      position: relative;
      display: inline-block;
      border-radius: 5px;
      padding: 5px 20px;
      font-size: 20px;
      font-weight: 800;
      box-shadow: 0px 0px 8px 0px #000;
      animation: scroll-left 10s linear infinite;
    }
    @keyframes scroll-left {
      0% {
        transform: translateX(0%);
      }
      33% {
        transform: translateX(-100%);
      }
      66% {
        transform: translateX(100%);
      }
      100% {
        transform: translateX(0%);
      }
    }
  }
  .rightControl {
    width: 400px;
    display: flex;
    align-items: center;
    // background-color: red;
    justify-content: space-evenly;
    .date {
      font-size: 20px;
      color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      span:first-child {
        color: #eb780d;
        font-size: 14px;
      }
    }
  }
}
.read-the-docs {
  color: #888;
}
</style>
